import React from 'react';
import { connect } from 'dva'
import { Card, Divider, Button, Row, Col, Modal, Input, Form ,DatePicker} from 'antd';
import DescriptionList from 'components/DescriptionList';
import PageHeaderLayout from 'components/Layout/PageHeaderLayout';
import pathToRegexp from 'path-to-regexp';
import moment from 'moment';
import { LwjDownload } from 'components'
import { receiptType } from 'utils/enumConfig'

const { Description } = DescriptionList;

const FormItem = Form.Item;

const formItemLayout = {
  labelCol: {
    xs: { span: 4 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 20 },
    sm: { span: 20 },
  },
};


const receiptAudits = ({ location, dispatch, receiptAudit, loading }) => {

  const PopWindowForm = Form.create()(
    class extends React.Component {
      render() {
        const { visible, onCancel, onCreate, form ,methodName} = this.props;
        const { getFieldDecorator } = form;
        return (
          <Modal
            visible={visible}
            title={this.props.title}
            okText="确认"
            onCancel={onCancel}
            onOk={onCreate}
          >
            <h3> {this.props.area} </h3>
            <Form>
              <FormItem label="备注:" {...formItemLayout}>
                {getFieldDecorator('remark', {
                  rules: [{ required: this.props.isRequired == "true" ? true : false, message: '拒绝通过必须输入备注！' }],
                })(<Input type="textarea" placeholder="请输入备注" />)}
              </FormItem>
              <FormItem label="手续费:" {...formItemLayout}>
                {getFieldDecorator('serviceFee', {
                  rules: [{ required: true, message: '请输入手续费！' }],
                })(<Input type="number" placeholder="请输入手续费" />)}
              </FormItem>
              <FormItem label="结算号:" {...formItemLayout}>
                {getFieldDecorator('settlementNum', {
                  rules: [{ required: true, message: '请输入结算号！' }],
                })(<Input type="text" placeholder="请输入结算号" />)}
              </FormItem>
              {methodName === "approve" && <FormItem label="到帐时间:" {...formItemLayout}>
                {getFieldDecorator('arrivalTime', {
                  rules: [{ required: true, message: '请输入到帐时间！' }],
                })(<DatePicker onChange={() => {
                }} />)}
              </FormItem>}
            </Form>
          </Modal>
        );
      }
    }
  );

  class PopWindowButton extends React.Component {
    state = {
      visible: false,
    };

    showModal = () => {
      this.setState({ visible: true });
    }
    handleCancel = () => {
      this.setState({ visible: false });

    }
    handleCreate = () => {
      const form = this.formRef.props.form;
      const match = pathToRegexp('/receipt/audit/:id').exec(location.pathname);
      form.validateFields((err, values) => {
        if (err) {
          return;
        }
        dispatch({
          type: 'receiptAudit/' + this.props.methodName,
          payload: {
            ...values,
            id: match[1]
          }
        })
        form.resetFields();
        this.setState({ visible: false });
      });
    }
    saveFormRef = (formRef) => {
      this.formRef = formRef;
    }
    render() {
      return (
        <div>
          <Button type={this.props.type} onClick={this.showModal}>{this.props.name}</Button>
          <PopWindowForm
            methodName = {this.props.methodName}
            wrappedComponentRef={this.saveFormRef}
            visible={this.state.visible}
            onCancel={this.handleCancel}
            onCreate={this.handleCreate}
            title={this.props.title}
            area={this.props.area}
            isRequired={this.props.isRequired}
          />
        </div>
      );
    }
  }

  let { currentItemDetail } = receiptAudit;
  const audit = {
    onShowDetail(record) {
      dispatch({
        type: 'receipt/showDetail',
        payload: {
          recordId: record.id
        }
      });
    }
  }
  const breadcrumbList = [
    {
      title: '财务管理',
    }, {
      title: '收款单',
      href: '/receipt'
    }, {
      title: '收款单审核',
    }
  ];
  return (
    <PageHeaderLayout title="收款单审核" breadcrumbList={breadcrumbList}>
      {!_.isEmpty(currentItemDetail) && <Card bordered={false}>
        <DescriptionList
          size="large"
          title="收款单审核"
          style={{
            marginBottom: 32
          }}>
          <Description term="收款单号">{currentItemDetail.num}</Description>
          <Description term="收款单类型">{receiptType[currentItemDetail.receiptType]}</Description>
          <Description term="收款方">{currentItemDetail.receipterName}</Description>
          <Description term="收款账户">{currentItemDetail.receipterAccount}</Description>
          <Description term="付款方">{currentItemDetail.paymenterName}</Description>
          <Description term="支付方式">{currentItemDetail.paymentType}</Description>
          <Description term="支付时间">{moment(currentItemDetail.paymentTime).format("YYYY-MM-DD HH:mm:ss")}</Description>
          <Description term="支付凭证号">{currentItemDetail.paymentNum}</Description>
          <Description term="应收金额">{currentItemDetail.receivable}</Description>
          <Description term="实收金额">{currentItemDetail.received}</Description>
          <Description term="制单人">{currentItemDetail.creatorName}</Description>
          <Description term="附件"><LwjDownload title={'点击下载'} targetUrl={currentItemDetail.attachments || ''}/></Description>
        </DescriptionList>
        <Divider style={{
          marginBottom: 32
        }} />
        <div >
          <Row type="flex" justify="start">

            <Col span={2}> <PopWindowButton methodName="approve" type="primary" name="审核通过" title="审核确认" area="确认通过此收款单？" isRequired="false" /></Col>
            <Col span={2}> <PopWindowButton methodName="deny" type="danger" name="审核拒绝" title="审核确认" area="确认不通过此收款单？" isRequired="true" /></Col>
            <Col span={1}><Button onClick={() => {
              dispatch({
                type: "receipt/showList",
                payload: {
                }
              })
            }}>取消</Button></Col>
          </Row>
        </div>
      </Card>}
    </PageHeaderLayout>
  )
};

export default connect(({ receiptAudit, loading }) => ({ receiptAudit, loading }))(receiptAudits)
